<template>
	<view class="u-page">
        <view class="u-demo-block">
            <view class="u-demo-block__content">
                <view class="album">
                    <view class="album__avatar">
						<u-avatar :src="src" size="50" shape="square"></u-avatar>
                    </view>
                    <view class="album__content">
                        <u--text
                                text="张三"
                                type="primary"
                                bold
                                size="20"
                        ></u--text>
						<u--text v-text="textaa"></u--text>
                        <u-album :urls="urls1"  keyName="src2"></u-album>
                    </view>
                </view>
            </view>
        </view>
		<view>
			<u-grid :border="false" col="9" align="right">
		        <u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
						<u-icon
			                :customStyle="{paddingTop:18+'rpx'}"
		                    :name="listItem.name"
	                        :size="26"	
						></u-icon>
						<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		    <u-toast ref="uToast" />
			
		</view>
		
		<u-divider text="" :hairline="true"></u-divider>
	</view>

</template>

<script>
    export default {
        data() {
            return {
				list:[
					{
						name:'chat',
					},
					{
						name:'star',
					}
					
				],
				
				src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.puchedu.cn%2Fuploads%2F3%2F26%2F92758782%2F1733369557.jpg&refer=http%3A%2F%2Fimg.puchedu.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652775097&t=5d4a5d790cf6ca8c92f92e3c46ad29b7',
                textaa:'测试说说,测试说说,测试说说,测试说说,测试说说,测试说说,',
				urls1: [
					{
						src2: 'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
					},
				]
            }
        }
    }
</script>

<style lang="scss">
	.star_icon{
		padding-left: 10%;
	}
	.chat_icon{
		padding-left: 90%;
		padding-top: 0%;
	}
    .album {
        @include flex;
        align-items: flex-start;

        &__avatar {
             background-color: $u-bg-color;
             padding: 3px;
             border-radius: 3px;
         }
    
        &__content {
             margin-left: 10px;
             flex: 5;
         }
    }
	.u-page{
		padding-left: 3%;
		padding-top: 5%;
		padding-right: 5%;
	}
</style>